<template>
  <div class="body">
    <div class="title">
      <img class="logo" src="@/assets/images/logo.png" @click="clickLogo()"/>
      <h4 v-show="!isCollapse">通用后台管理系统</h4>
    </div>
    <TreeMenu :treeData="treeData" :isCollapse="isCollapse"></TreeMenu>
  </div>
</template>

<script>
import TreeMenu from "./TreeMenu.vue";
export default {
  name: "LayoutAside",
  components: { TreeMenu },
  props: {
    treeData: Array,
    isCollapse: Boolean
  },
  data() {
    return {

    };
  },
  methods:{
    clickLogo(){
        this.$emit('clickLogo')
    }
  }
};
</script>

<style scoped lang="less">
.body {
  z-index: 99;
  width: calc(100% - 5px);
  box-shadow: 1px 0 5px rgba(0, 0, 0, 0.5);
  background-color: #fff;
  height: 800px;
  .title {
    text-align: center;
    padding-top: 15px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;

    .logo {
      margin-right: 5px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
  }
}
</style>